


        .border,
        .hover,
        .needHover .border i{
            width: 0%;
            height: 0%;
            position: absolute;
        }
        .needHover .border.horizontal i{
            height: 100%;
        }
        .needHover .border.vertical i{
            width: 100%;
        }
        .hover.horizontal,
        .border.horizontal{
            height: 4px;
        }
        .hover.vertical,
        .border.vertical{
            width: 4px;
        }
        .order .border.horizontal{
            height: 2px;
        }
        .order .border.vertical{
            width: 2px;
        }
        .order .border,
        .hover{
            background: #000;
        }
       
        .needHover .border i{
            background:#e50012;
        }
        
        .needHover .border.top i,
        .hover.top,
        .border.top{
            top:0px;
            left:0px;
        }
        .needHover .border.right i,
        .hover.right,
        .border.right{
            top:0px;
            right:0px;
        }
        .needHover .border.bottom i,
        .hover.bottom,
        .border.bottom{
            bottom: 0px;
            right:0px;
        }
        .needHover .border.left i,
        .hover.left,
        .border.left{
            bottom: 0px;
            left:0px;
        }
        .order .auto,
        .hover,
        .needHover .border i,
        .inview .border.auto{
            transition: all ease-out .4s;
        }
        .needHover.mouseOn .hover.horizontal,
        .inview .border.auto.horizontal{
            width: 100% !important;
        }
        .needHover.mouseOn .hover.vertical,
        .inview .border.auto.vertical{
            height: 100% !important;
        }
        .needHover.mouseOn .border i{
            height: 100%;
            width: 100%;
        }
        .order .right,
        .hover.bottom,
        .needHover.mouseOn .hover.right,
        .needHover .bottom i,
        .needHover.mouseOn .right i,
        .inview .border.auto.right{
            transition-delay: .4s;
        }
        .order .right,
        .hover.right,
        .needHover.mouseOn .hover.bottom,
        .needHover .right i,
        .needHover.mouseOn .bottom i,
        .inview .border.auto.bottom{
            transition-delay: .8s;
        }
        .order .left,
        .hover.top,
        .needHover.mouseOn .hover.left,
        .needHover .top i,
        .needHover.mouseOn .left i,
        .inview .border.auto.left{
            transition-delay: 1.2s;
        }
        .needHover.mouseOn .top i,
        .needHover.mouseOn .hover.top
        {
            transition-delay: 0s;
        }

        .beginning{
            z-index:15;
            top:0px;
            position: fixed;
            height: 100%;
            background: #fff;
            width: 90%;
            overflow: hidden;
        }
        .beginning .line{
            width: 2px;
            position: absolute;
            top: 0px;
            bottom:0px;
            margin:auto;
            
        }
        .beginning img{
            display: block;
            position: relative;
        }
        .beginning .line.top{
            z-index: 3;
            background:#868888;
            height: 0px;
            transition:  ease 1s all;
            transition-delay: 2s;
        }
        .beginning.first .line.top{
            height: 200px;
            transition-delay: 1s;
        }
        .beginning.basic .line.top{
            transition:initial;
            height: 200px;
        }
        .beginning .line.bottom{
            background: #f1f1f1;
            z-index: 2;
            height: 80%;
        }
        .beginning.left{
            right: calc(50% - 1px);
            transition: all 2s ease;
            justify-content: flex-end;
            transition-delay: 0s;
            transform:skewX(-20deg) translate(0%,0%);
        }
        .beginning.left.first{
            transition-delay: 2s;
            transform:skewX(-20deg) translate(-200%,0%);
        }
        .beginning.left.enter{
            transform:skewX(-20deg) translate(-200%,0%);
        }
        .beginning.left.leave{
            transition-delay: 0s;
            transform:skewX(-20deg) translate(0%,0%);
        }
        .beginning.left .line{
            right:0px;
        }
        .beginning.left img{
            bottom:0px;
            transition:opacity ease 1s 3s,bottom 1s ease 2s,transform 1s ease 3s;
            opacity: 0;
            transform: skew(20deg) translate(100%,0%);
        }
        .beginning.left.first img{
            transition:opacity ease 1s 0s,bottom 1s ease 1s,transform 1s ease 0s;
            opacity: 1;
            bottom:50px;
            transform: skew(20deg) translate(-50px,0%);
        }
        .beginning.left.basic img{
            transition:initial;
            opacity: 1;
            bottom:50px;
            transform: skew(20deg) translate(-50px,0%);
        }
        .beginning.right{
            left: calc(50% - 1px);
            transition: all 2s ease;
            justify-content: flex-first;
            transition-delay: 0s;
            transform:skewX(-20deg) translate(0%,0%);
        }
        .beginning.right.first{
            transition-delay: 2s;
            transform:skewX(-20deg) translate(200%,0%);
        }
        .beginning.right.enter{
            transform:skewX(-20deg) translate(200%,0%);
        }
        .beginning.right.leave{
            transition-delay:0s;
            transform:skewX(-20deg) translate(0%,0%);
        }
        .beginning.right .line{
            left: 0px;
        }
        .beginning.right img{
            top: 0px;
            transition:opacity ease 1s 3s,top 1s ease 2s,transform 1s ease 3s;
            opacity: 0;
            transform: skew(20deg) translate(-100%,0%);
        }
        .beginning.right.first img{
            transition:opacity ease 1s 0s,top 1s ease 1s,transform 1s ease 0s;
            opacity: 1;
            top: 50px;
            transform: skew(20deg) translate(50px,0%);
        }
        .beginning.right.basic img{
            transition:initial;
            opacity: 1;
            top: 50px;
            transform: skew(20deg) translate(50px,0%);
        }
        
        .navSide.ready{
            opacity: 0;
        }
        .navSide.frozen{
            opacity: 1;
        }
        .navSide.ready .navBtn{
            top: 100%;
            transition: 1s all ease;
        }
        .navSide.frozen .navBtn{
            top: 0px;
        }
        @media (max-width:767px){
            .beginning.left img{
                transform: skew(20deg) translate(100%,0%) scale(.6);
            }
            .beginning.left.first img{
                transform: skew(20deg) translate(-20px,0%) scale(.6);
            }
            .beginning.left.basic img{
                transform: skew(20deg) translate(-50px,0%) scale(.6);
            }
            .beginning.right img{
                transform: skew(20deg) translate(-100%,0%) scale(.6);
            }
            .beginning.right.first img{
                transform: skew(20deg) translate(20px,0%) scale(.6);
            }
            .beginning.right.basic img{
                transform: skew(20deg) translate(50px,0%) scale(.6);
            }
        }